<template>
    <div class="main">
      <p  class="main_text">委托书管理</p>
        <!-- ############################################## 查询 ############################################## -->
        <div class="top mb20 p20">
            <el-form :model="searchData" class='df'>
                <el-form-item label="区域：">
                    <el-cascader placeholder="选择住址" v-model="searchData.area" :options="optionsData" filterable
                        style="width: 10rem;" class="mr20" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="searchBtn">查询</el-button>
                    <el-button type="primary" plain @click="resetBtn">重置</el-button>
                </el-form-item>
            </el-form>

        </div>
        <!-- ############################################## 表单 ############################################## -->
        <div class="cyr-flex">
            <div class="mb20">
                <el-button type="primary" @click="centerDialogVisible = true">添加委托书</el-button>
            </div>
          <div class="cyr-flex-box">
            <el-table @selection-change="handleSelectionChange" :data="tableData"
                :header-cell-style="{ 'background': '#f0f6fe' }"  :show-overflow-tooltip="true" v-adaptive border>
                <el-table-column type="selection" width="50" />
                <el-table-column label="编号" prop="id" />
                <el-table-column label="地区" prop="area" />
                <el-table-column label="上传时间" prop="createdAt" />
                <el-table-column label="操作" fixed="right" width="120">
                    <template #default="props">
                        <el-button size="small" link type="primary" @click="editFormBtn(props.row)">修改</el-button>
                        <el-button size="small" link type="danger" @click="delFormBtn(props.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页器 -->
            <smartPager v-model:current-page="currentPage" v-model:page-size="pageSize" :total="Number(total)"
                @change="handleCurrentChange" />
          </div>
        </div>
        <!-- ############################################## 蒙层 ############################################## -->
        <!-- ****************************** 添加委托书 ****************************** -->
        <el-dialog v-model="centerDialogVisible" width="40%" align-center>
            <template #header>
                <div class="df aic">
                    <el-icon style="color: #fff;" size="20">
                        <Edit />
                    </el-icon>&nbsp;
                    <p style="color: #fff;">添加委托书</p>
                </div>
            </template>
            <div class="df fdc aic">
                <el-form :model="addFormData" label-width="7.5rem">
                    <el-form-item label="委托书区域：" style="width: 100%;">
                        <el-cascader placeholder="选择住址" v-model="addFormData.address" :options="optionsData" filterable
                            style="width: 100%;" />
                    </el-form-item>
                    <el-form-item label="委托书文件：" style="width: 100%;">
                        <el-upload ref="uploadRef" class="upload-demo" action="#" :auto-upload="false"
                            :on-change="fileUpload">
                            <template #trigger>
                                <el-button type="primary">选择文件</el-button>
                            </template>
                        </el-upload>
                    </el-form-item>
                </el-form>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="centerDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="AddFormDataBtn">
                        确定
                    </el-button>
                </span>
            </template>
        </el-dialog>
        <!-- ****************************** 修改委托书 ****************************** -->
        <el-dialog v-model="editCenterDialogVisible" width="40%" align-center>
            <template #header>
                <div class="df aic">
                    <el-icon style="color: #fff;" size="20">
                        <Edit />
                    </el-icon>&nbsp;
                    <p style="color: #fff;">修改委托书</p>
                </div>
            </template>
            <div class="df fdc aic">
                <el-form :model="editFormData" label-width="7.5rem">
                    <el-form-item label="委托书区域：" style="width: 100%;">
                        <el-cascader placeholder="选择住址" v-model="editFormData.address" :options="optionsData" filterable
                            style="width: 100%;" disabled />
                    </el-form-item>
                    <el-form-item label="委托书文件：" style="width: 100%;">
                        <el-upload ref="uploadRef" class="upload-demo" action="#" :auto-upload="false"
                            :on-change="fileUpload">
                            <template #trigger>
                                <el-button type="primary">选择文件</el-button>
                            </template>
                        </el-upload>
                    </el-form-item>
                </el-form>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="editCenterDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="editSaveBtn">
                        确定
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { RequestAuthorizedLetterUploadLetter, RequestAuthorizedLetterDeleteList, RequestAuthorizedLetterGetPageList, RequestAuthorizedLetterUpdateLetter } from "@/api/path/index.js";
import { regionData } from 'element-china-area-data'  //获取地区
import { formatTime } from '@/filters/index'
import { Edit } from '@element-plus/icons-vue'
import { ref } from 'vue';
const searchData = ref<any>({
    area: '',
})
const multipleSelection = ref<any>([])
const handleSelectionChange = (val: any) => {
    multipleSelection.value = val
}
const centerDialogVisible = ref<any>(false)
const editCenterDialogVisible = ref<any>(false)
/* *********************************** 分页获取数据 *********************************** */
const total = ref<any>(0)
const currentPage = ref<any>(1)
const pageSize = ref<any>(10)
const handleSizeChange = (val: number) => {
    getData()
}
const handleCurrentChange = (val: number) => {
    getData()
}
const tableData = ref<any>([])                          //全部
const optionsData = regionData.map((item: any) => {
    const children = item.children.map((val: any) => {
        return {
            label: val.label,
            value: val.label,
        };
    })
    return {
        label: item.label,
        value: item.label,
        children: children
    };
})
const getData = () => {
    RequestAuthorizedLetterGetPageList({
        page: currentPage.value,
        rows: pageSize.value,
    }).then((res: any) => {
        console.log(res);
        res.resultObj.pageList.forEach((item: any) => {
            item.createdAt = formatTime(item.createdAt)
            item.updatedAt = formatTime(item.updatedAt)
        })
        tableData.value = res.resultObj.pageList
        total.value = res.resultObj.totalCount
    })
}
getData()
const searchBtn = () => {
    RequestAuthorizedLetterGetPageList({
        area: searchData.value.area[0] + ',' + searchData.value.area[1]
    }).then((res: any) => {
        tableData.value = res.resultObj.pageList
        total.value = res.resultObj.totalCount
    })
}
/* *********************************** 添加 *********************************** */
/* 文件上传 */
const uploadRef = ref<any>()
const fileUpload = (file: any) => {
    uploadRef.value = file.raw
}
const addFormData = ref<any>({
    address: ''
})
const AddFormDataBtn = () => {
    let addData = new FormData()
    addData.append('file', uploadRef.value)
    addData.append('area', addFormData.value.address)
    RequestAuthorizedLetterUploadLetter(addData).then((res: any) => {
        if (res.code == 0) {
            ElMessage.success(res.msg)
            //其它处理代码
            getData()
            centerDialogVisible.value = false
            addFormData.value.adress = ''
        } else {
            ElMessage.error(res.msg)
        }
    })
}
/* *********************************** 修改 *********************************** */
const editFormData = ref<any>({
    address: ''
})
const editFormBtn = (row: any) => {
    editCenterDialogVisible.value = true
    editFormData.value.address = row.area.split(',')
}
const editSaveBtn = () => {
    let addData = new FormData()
    addData.append('file', uploadRef.value)
    addData.append('area', editFormData.value.address)
    RequestAuthorizedLetterUpdateLetter(addData).then((res: any) => {
        if (res.code == 0) {
            ElMessage.success(res.msg)
            //其它处理代码
            getData()
            editCenterDialogVisible.value = false
        } else {
            ElMessage.error(res.msg)
        }
    })
}
/* *********************************** 重置 *********************************** */
const resetBtn = () => {
    searchData.value = []
    getData()
}
/* *********************************** 批量删除 *********************************** */
const delFormBtn = (row: any) => {
    let idsForm = new FormData()
    idsForm.append('ids', row.id)
    RequestAuthorizedLetterDeleteList(idsForm).then((res: any) => {
        if (res.code == 0) {
            ElMessage.success(res.msg)
            //其它处理代码
            getData()
        } else {
            ElMessage.error(res.msg)
        }
    })
    console.log(row.id);

}
</script>

<style scoped lang="scss">
.main {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
    .top {
        width: 100%;
        background-color: #fff;
    }

    .content {
        width: 100%;
        background-color: #fff;
    }
}

/* 弹出框样式 */
::v-deep .el-overlay {
    .el-dialog__header {
        background-color: #116cf8;
        margin-right: 0;
    }

    .el-dialog__title {
        color: #fff;
    }

    .el-icon svg {
        color: #fff;
    }

    .el-form {
        .el-icon svg {
            color: #dcdfe6;
        }

    }
}
</style>
